<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07 留言板</title>
    <style>
        h1 {
            text-align: center;
        }

        .news-list {
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 600px;
            margin: 0 auto;
            padding: 10px;
        }

        .news-list h4 {
            margin: 0 0 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .news-list ul {
            padding: 0;
            margin: 0;
            list-style: none;
            line-height: 2;
        }

        .form {
            margin: 100px auto 0;
            width: 600px;
            text-align: center;
            overflow: hidden;
        }
        
        .form input {
            float: left;
            width: 480px;
            height: 50px;
            box-sizing: border-box;
            padding: 10px;
        }

        .form #btn {
            float: left;
            width: 120px;
            height: 50px;
        }
    </style>
</head>

<body>
    <h1>07 留言板</h1>

    <h1>显示5条最新消息</h1>
    <div class="news-list">
        <h4>最新消息</h4>
        <ul id="newList">

        </ul>
    </div>

    <div class="form">
        <input type="text" name="" id="tex"><input type="button" id="btn" value="添加">
    </div>
</body>
<script src="../common.js"></script>
<script>
    /* 
        需求：留言板
            * 把现有数据渲染到页面中
            * 点击按钮的时候获取最新的数据，插入到数组中，重新渲染到压面
                * 新数据从头不添加
                * 总条数不超过5条
            * 回车提交数据
    */

    (function () {

        var newList = getid('newList');
        var tex = getid('tex');
        var btn = getid('btn');
        var news = [1, 2, 3, 4];

        function init() { // 初始化方法
            var html = ''; // 存放拼接的数据  注意：放在里面就是每次重新拼接最新的数据
            newList.innerHTML = ''; // 渲染之前先清空旧数据
            for (var i = 0; i < news.length; i++) {
                html += '<li>' + (i + 1) + '.' + news[i] + '</li>';
            }
            newList.innerHTML = html; // 数据渲染
        }

        init();

        function creatList() {
            var text = tex.value;
            if (text) {
                news.unshift(text);
                if (news.length == 6) { // 临界值的设置
                    news.pop(); // 数据超过5条删除最后一条
                }
                init();
                tex.value = ''; // 清空
                tex.focus(); // 聚焦
            } else {
                alert('内容不能为空，请输入内容');
            }
        }

        // 点击按钮的时候获取最新的数据，插入到数组中，重新渲染到压面
        btn.onclick = function () {
            creatList()
        }

        tex.onkeyup = function (ev) {
            // console.log(ev.keyCode); // 键值
            if (ev.keyCode == 13) {
               creatList()
            }
        }

    })();
</script>

</html>